<template> 
    <section class="viewArea">
            <div class="containHead">客户关系管理</div>
        <section class="mainContainer">
            <div class="clearfix"> 
                <Button 
                    class="filter-item" 
                    type="primary" 
                    @click="handleAddCustomer"
                >
                <Icon type="plus"></Icon>
                添加客户
                </Button> 
            </div>    
            <Row style="padding-top: 20px">
                <Col span="24">
                    <Table size="small" width="100%"  @on-sort-change="handleChangeSort" @on-selection-change="handleSelectionChange"  :columns="columns" :data="customerList.list" ellipsis></Table>
                </Col>
            </Row>
            <Row style="margin-top: 20px;">
                <Col span="24"> 
                    <Page placement="top" @on-change="skipPage" @on-page-size-change="skipPageSize" :total="customerList.total" :page-size="customerList.page_size" :current="page" show-elevator  show-total></Page>
                </Col>
            </Row>
        </section>
        <CreateCustomerModal 
            :title="create ? '添加客户' : '编辑客户'"
            :visible="dialogFormVisible"
            :data="modifyData"
            @closeModal="handleCloseModal"
            @save="handleSaveCustomer"
        />
    </section>
</template>

<script>
import { mapGetters } from 'vuex'
import CreateCustomerModal from './CreateCustomerModal' 
import { STATUS_OPTIONS } from '@/utils/opts'
import { cloneDeep } from '@/utils'
export default { 
    name: "customer",
    data() {
      return { 
        password: '',
        dialogFormVisible : false,
        deleteVisible: false,
        create: true,
        customer_id: -1,
        modifyData: null, 
        page: 1,
        page_size: 20,  
        orderby: "id",
        order: "desc",
        columns: [
            {
                type: 'selection',
                width: 60,
                align: 'center'
            },
            {
                title: '客户名称',
                width: 128,
                sortable: true,
                sortType: "desc",
                key: 'customer_mark', 
                sortable: 'id',
            },
            {
                title: '公司名', 
                key: 'company' 
            },
            {
                title: '客户状态', 
                key: 'contacts',
                render(h, row){ 
                    let status = '';
                    STATUS_OPTIONS.forEach(item => {
                        if(row.row.status == item.value) status = item.label 
                    })
                    return <span>{
                        status
                    }</span>
                }   
            }, 
            {
                title: '联系人', 
                key: 'contacts',
                render(h, row){ 
                    let res = row.row.contacts.map(item => {
                        return <p>{item.name}</p>
                    })
                    return <p>{ 
                        res
                    }</p>
                }   
            }, 
            {
                title: '联系电话', 
                key: 'contacts',
                render(h, row){ 
                    let res = row.row.contacts.map(item => {
                        return <p>{item.phone}</p>
                    })
                    return <p>{ 
                        res
                    }</p>
                }   
            }, 
            {
                title: '联系邮箱', 
                key: 'contacts',
                render(h, row){ 
                    let res = row.row.contacts.map(item => {
                        return <p>{item.email}</p>
                    })
                    return <p>{ 
                        res
                    }</p>
                }   
            }, 
            {
                title: '联系qq', 
                key: 'contacts',
                render(h, row){ 
                    let res = row.row.contacts.map(item => {
                        return <p>{item.qq}</p>
                    })
                    return <p>{ 
                        res
                    }</p>
                }   
            }, 
            {
                title: '操作', 
                key: 'contacts',
                render: (h, row) => { 
                    let _this = this
                    return h('div', [
                        h('i-button', {
                            props: {
                                type: 'text',
                            },
                            on: {
                                click() {
                                    _this.handleModifyItem(row.row)
                                }
                            }
                        }, '编辑'),
                        h('i-button', {
                            props: {
                                type: 'text',
                            },
                            on: {
                                click(){
                                    _this.handleDeteleComfirm(row.row)
                                }
                            }
                        }, '删除'),
                    ]);
                }   
            }, 
        ]
      }
    },
    computed: {
        ...mapGetters(['customerList'])
    },
    components: {
        CreateCustomerModal, 
    },
    created(){
        this.getList()
    },
    methods: { 
        handleChangeSort(sort){ 
            this.order = sort.order;
            this.getList()
        },
        skipPage (page){
            if(!isNaN(page)){
                this.page = page;
                this.getList();
            }
        },
        skipPageSize (page_size){
            if(!isNaN(page_size)){
                this.page_size = page_size;    
                this.getList();   
            }
        },
        getList(){
            let condition = { 
                page: this.page,
                pagesize: this.page_size,  
                orderby: this.orderby,
                order: this.order,
            }
            this.$store.dispatch('fetchCustomerList', condition) 
        },
        handleCloseModal(){
            this.dialogFormVisible = false
        },
        handleAddCustomer(){
            this.dialogFormVisible = true
            this.create = true
            this.modifyData = {
                    "domain": "",  
                    "company": "",  
                    "status": 1, 
                    "type": 1,  
                    "contacts": [{
                        "name": "",
                        "email": "",
                        "phone": "",
                        "qq": ""
                    }] 
                }
        },
        handleModifyItem(row){
            this.dialogFormVisible = true
            this.create = false
            this.customer_id = row.customer_id
            this.modifyData = cloneDeep(row)
        },
        handleSelectionChange(val){ 
        },
        handleClick(row) { 
        },
        //新增
        handleSaveCustomer(params){
            let _this = this;
            if(_this.create){ //添加
                _this.$store.dispatch('createCustomer', {
                    params,
                    cb(_data){ 
                        if(_data.ok){
                            _this.$Message.success("保存成功") 
                            _this.dialogFormVisible = false
                            _this.getList();
                        }else{ 
                            _this.$Message.error("保存失败") 
                        }
                    }
                })  
            }else{
                params.customer_id = _this.customer_id
                _this.$store.dispatch('modifyCustomer', {
                    params,
                    cb(_data){  
                        if(_data.ok){
                            _this.$Message.success("修改成功") 
                            _this.dialogFormVisible = false
                            _this.getList();
                        }else{ 
                            _this.$Message.error("修改失败") 
                        }
                    }
                })   
            }
            //确认保存需要密码认证
            // this.$Modal.confirm({
            //     title: "密码确认：",
            //     render: (h) => {
            //         return h('Input', {
            //             props: {
            //                 value: _this.password,
            //                 type:'password',
            //                 autofocus: true,
            //                 placeholder: '请输入登陆密码以确认操作', 
            //             },
            //             on: {
            //                 input: (val) => {
            //                     _this.password = val;
            //                 }
            //             }
            //         })
            //     },
            //     onOk:() => { 
            //         params.password = _this.password
            //         if(_this.create){ //添加
            //             _this.$store.dispatch('createCustomer', {
            //                 params,
            //                 cb(_data){ 
            //                     if(_data.ok){
            //                         _this.$Message.success("保存成功") 
            //                         _this.dialogFormVisible = false
            //                         _this.getList();
            //                     }else{ 
            //                         _this.$Message.error("保存失败") 
            //                     }
            //                 }
            //             })  
            //         }else{
            //             params.customer_id = _this.customer_id
            //             _this.$store.dispatch('modifyCustomer', {
            //                 params,
            //                 cb(_data){  
            //                     if(_data.ok){
            //                         _this.$Message.success("修改成功") 
            //                         _this.dialogFormVisible = false
            //                         _this.getList();
            //                     }else{ 
            //                         _this.$Message.error("修改失败") 
            //                     }
            //                 }
            //             })   
            //         }
            //         _this.password = ''
            //     },
            //     onCancel(){
            //         _this.password = ''
            //     }
            // })
        },
        handleDeteleComfirm(item){ 
            let _this = this;
            this.deleteVisible = true;
            this.delete_id = item.customer_id;  
            this.$Modal.confirm({
                title: '删除客户',
                content: '确认删除该客户？',
                onOk: () => {
                    _this.handleDeleteCustomer(item);
                }, 
            });
        },
        //删除
        handleDeleteCustomer(data){
            let _this = this;
            let params = {
                customer_id: data.customer_id
            }
            //this.delete_id 删除客户id
            _this.$store.dispatch('deleteCustomer', {
                params,
                cb(_data){  
                    if(_data.ok){ 
                        _this.$Message.success("删除成功")
                        _this.dialogFormVisible = false
                        _this.getList()
                    }else{ 
                        _this.$Message.error("删除失败")
                    }
                }
            })  
            
        }, 
    }
}
</script>